<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header">
            <span>基金/股票</span>
          </div>
          <el-select v-model="fundId" placeholder="请选择" @change="selectFund">
            <el-option
              v-for="item in funds"
              :key="item.id"
              :label="item.name +item.updateDay"
              :value="item.id">
            </el-option>
          </el-select>

        </el-card>
      </el-col>
      <!--近十年长投温度-->
      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header">
            <span><span>{{fundName}} &nbsp;&nbsp;&nbsp; </span> 近十年长投温度</span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="tenCompose" style="height: 420px"/>
          </div>
        </el-card>
      </el-col>
      <!-- 近五年长投温度-->
      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header"><span>{{fundName}} &nbsp;&nbsp;&nbsp; </span><span>近五年长投温度</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="fiveCompose" style="height: 420px"/>
          </div>
        </el-card>
      </el-col>
      <!--近三年长投温度-->
      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header"><span>{{fundName}} &nbsp;&nbsp;&nbsp; </span> <span>近三年长投温度</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="thirdCompose" style="height: 420px"/>
          </div>
        </el-card>
      </el-col>
      <!--近一年长投温度-->
      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header">
            <span>{{fundName}} &nbsp;&nbsp;&nbsp; </span> <span>近一年长投温度</span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="oneCompose" style="height: 420px"/>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {getCache} from "@/api/monitor/cache";
  import {listFund, getFund, delFund, addFund, updateFund, exportFund, getFundData} from "@/api/money/fund";
  import echarts from "echarts";

  export default {
    name: "Server",
    data() {
      return {
        // 加载层信息
        loading: [],
        times: [],
        // 统计命令信息
        fiveModel: null,
        // 使用内存
        tenModel: null,
        thirdModel: null,
        oneModel: null,
        fundId: null,
        fundName: '',
        funds: [],
        // cache信息
        cache: [],
        fiveX: [],
        fiveData: [],
        tenX: [],
        tenData: [],
        thirdX: [],
        thirdData: [],
        oneX: [],
        oneData: [],
        queryParams: {
          pageNum: 1,
          pageSize: 50,
          name: null,
          code: null,
          dataUrl: null,
        }
      };
    },
    created() {
      this.getList();
      this.getFund();
      this.getFundTime();
      this.openLoading();
    },
    methods: {
      /** 查缓存询信息 */
      getList() {
        getCache().then((response) => {
          this.cache = response.data;
          this.loading.close();
        });
      },
      selectFund() {
        this.getFundTime();
        this.funds.forEach(item => {
          if (item.id === this.fundId) {
            this.fundName = item.name;
          }
        });
      },
      mapTime(array) {
        return array.map(function (item) {
          return item.format;
        })
      },
      mapData(array, index) {
        return array.map(function (item) {
          if (index === 0) {
            return item.peValue;
          } else if (index === 1) {
            return item.pbValue;
          } else if (index === 2) {
            return item.value;
          } else {
            return item.format;
          }
        })
      },
      getFund() {
        listFund(this.queryParams).then(response => {
          this.funds = response.rows;
          this.total = response.total;
          if (this.funds) {
            this.funds.forEach(item => {
              if (!item.updateDay || typeof (item.updateDay) === 'undefined') {
                item.updateDay = "";
              } else {
                item.updateDay = " [" + item.updateDay + "]";
                if (!this.fundId) {
                  this.fundId = item.id;
                  this.fundName = item.name;
                  this.getFundTime();
                }
              }
            });
          }
        });
      },
      getFundTime() {
        if (this.fundId) {
          getFundData(this.fundId).then(response => {
            if (response.code === 200) {
              this.tenData = response.ten;
              this.fiveData = response.five;
              this.thirdData = response.third;
              this.oneData = response.one;
              this.showGrid();
            }
          });
        }
      },
      showGrid() {
        this.fiveModel = echarts.init(this.$refs.fiveCompose, "fiveCompose");
        this.tenModel = echarts.init(this.$refs.tenCompose, "tenCompose");
        this.thirdModel = echarts.init(this.$refs.thirdCompose, "thirdCompose");
        this.oneModel = echarts.init(this.$refs.oneCompose, "oneCompose");

        this.fiveModel.setOption({
          legend: {
            data: ['PE温度', 'PB温度', '长投温度'],
            inactiveColor: '#777',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              animation: false,
              type: 'cross',
              lineStyle: {
                color: '#376df4',
                width: 2,
                opacity: 1
              }
            }
          },
          xAxis: {
            type: 'category',
            //data: this.mapTime(this.fiveData),
            data: this.mapData(this.fiveData, 3),
            axisLine: {lineStyle: {color: '#8392A5'}}
          },
          yAxis: {
            scale: true,
            axisLine: {lineStyle: {color: '#8392A5'}},
            splitLine: {show: false}
          },
          grid: {
            bottom: 80
          },
          dataZoom: [{
            textStyle: {
              color: '#8392A5'
            },
            handleIcon: 'path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            dataBackground: {
              areaStyle: {
                color: '#8392A5'
              },
              lineStyle: {
                opacity: 0.8,
                color: '#8392A5'
              }
            },
            brushSelect: true
          }, {
            type: 'inside'
          }],
          series: [
            {
              type: 'line',
              name: 'PE温度',
              data: this.mapData(this.fiveData, 0),
              smooth: true,
              showSymbol: false,
              lineStyle: {
                color: '#ccffcc',
                width: 1
              }
            },
            {
              name: 'PB温度',
              type: 'line',
              data: this.mapData(this.fiveData, 1),
              smooth: true,
              showSymbol: false,
              lineStyle: {
                color: '#999999',
                width: 1
              }
            },
            {
              name: '长投温度',
              type: 'line',
              data: this.mapData(this.fiveData, 2),
              smooth: true,
              showSymbol: false,
              lineStyle: {
                width: 1,
                color: '#cc0000',
              }
            }
          ]
        });
        this.tenModel.setOption({
          legend: {
            data: ['PE温度', 'PB温度', '长投温度'],
            inactiveColor: '#777',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              animation: false,
              type: 'cross',
              lineStyle: {
                color: '#376df4',
                width: 2,
                opacity: 1
              }
            }
          },
          xAxis: {
            type: 'category',
            //data: this.mapTime(this.fiveData),
            data: this.mapData(this.tenData, 3),
            axisLine: {lineStyle: {color: '#8392A5'}}
          },
          yAxis: {
            scale: true,
            axisLine: {lineStyle: {color: '#8392A5'}},
            splitLine: {show: false}
          },
          grid: {
            bottom: 80
          },
          dataZoom: [{
            textStyle: {
              color: '#8392A5'
            },
            handleIcon: 'path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            dataBackground: {
              areaStyle: {
                color: '#8392A5'
              },
              lineStyle: {
                opacity: 0.8,
                color: '#8392A5'
              }
            },
            brushSelect: true
          }, {
            type: 'inside'
          }],
          series: [
            {
              type: 'line',
              name: 'PE温度',
              data: this.mapData(this.tenData, 0),
              smooth: true,
              showSymbol: false,
              lineStyle: {
                color: '#ccffcc',
                width: 1
              }
            },
            {
              name: 'PB温度',
              type: 'line',
              data: this.mapData(this.tenData, 1),
              smooth: true,
              showSymbol: false,
              lineStyle: {
                color: '#999999',
                width: 1
              }
            },
            {
              name: '长投温度',
              type: 'line',
              data: this.mapData(this.tenData, 2),
              smooth: true,
              showSymbol: false,
              lineStyle: {
                width: 1,
                color: '#cc0000',
              }
            }
          ]
        });
        this.thirdModel.setOption({
          legend: {
            data: ['PE温度', 'PB温度', '长投温度'],
            inactiveColor: '#777',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              animation: false,
              type: 'cross',
              lineStyle: {
                color: '#376df4',
                width: 2,
                opacity: 1
              }
            }
          },
          xAxis: {
            type: 'category',
            //data: this.mapTime(this.fiveData),
            data: this.mapData(this.thirdData, 3),
            axisLine: {lineStyle: {color: '#8392A5'}}
          },
          yAxis: {
            scale: true,
            axisLine: {lineStyle: {color: '#8392A5'}},
            splitLine: {show: false}
          },
          grid: {
            bottom: 80
          },
          dataZoom: [{
            textStyle: {
              color: '#8392A5'
            },
            handleIcon: 'path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            dataBackground: {
              areaStyle: {
                color: '#8392A5'
              },
              lineStyle: {
                opacity: 0.8,
                color: '#8392A5'
              }
            },
            brushSelect: true
          }, {
            type: 'inside'
          }],
          series: [
            {
              type: 'line',
              name: 'PE温度',
              data: this.mapData(this.thirdData, 0),
              smooth: true,
              showSymbol: false,
              lineStyle: {
                color: '#ccffcc',
                width: 1
              }
            },
            {
              name: 'PB温度',
              type: 'line',
              data: this.mapData(this.thirdData, 1),
              smooth: true,
              showSymbol: false,
              lineStyle: {
                color: '#999999',
                width: 1
              }
            },
            {
              name: '长投温度',
              type: 'line',
              data: this.mapData(this.thirdData, 2),
              smooth: true,
              showSymbol: false,
              lineStyle: {
                width: 1,
                color: '#cc0000',
              }
            }
          ]
        });
        this.oneModel.setOption({
          legend: {
            data: ['PE温度', 'PB温度', '长投温度'],
            inactiveColor: '#777',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              animation: false,
              type: 'cross',
              lineStyle: {
                color: '#376df4',
                width: 2,
                opacity: 1
              }
            }
          },
          xAxis: {
            type: 'category',
            //data: this.mapTime(this.fiveData),
            data: this.mapData(this.oneData, 3),
            axisLine: {lineStyle: {color: '#8392A5'}}
          },
          yAxis: {
            scale: true,
            axisLine: {lineStyle: {color: '#8392A5'}},
            splitLine: {show: false}
          },
          grid: {
            bottom: 80
          },
          dataZoom: [{
            textStyle: {
              color: '#8392A5'
            },
            handleIcon: 'path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            dataBackground: {
              areaStyle: {
                color: '#8392A5'
              },
              lineStyle: {
                opacity: 0.8,
                color: '#8392A5'
              }
            },
            brushSelect: true
          }, {
            type: 'inside'
          }],
          series: [
            {
              type: 'line',
              name: 'PE温度',
              data: this.mapData(this.oneData, 0),
              smooth: true,
              showSymbol: false,
              lineStyle: {
                color: '#ccffcc',
                width: 1
              }
            },
            {
              name: 'PB温度',
              type: 'line',
              data: this.mapData(this.oneData, 1),
              smooth: true,
              showSymbol: false,
              lineStyle: {
                color: '#999999',
                width: 1
              }
            },
            {
              name: '长投温度',
              type: 'line',
              data: this.mapData(this.oneData, 2),
              smooth: true,
              showSymbol: false,
              lineStyle: {
                width: 1,
                color: '#cc0000',
              }
            }
          ]
        });

      },
      // 打开加载层
      openLoading() {
        this.loading = this.$loading({
          lock: true,
          text: "拼命读取中",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
      },
    },
  };
</script>
